import React, { Fragment } from 'react';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { Button, message } from 'antd';
import { removeUserInf, changeUserInf } from '@/store/actions/user';
import { clearTableLists } from '@/store/actions/tables';
import { usePermission } from '@/hooks';
import { USER_INFORMATION } from '@/utils/storage/constant';
import FetchButton from '@/framework/component/fetch_button';

const Home: React.FC = () => {
    const navigate = useNavigate();
    const dispatch = useDispatch();

    const handleLogin = (user: string) => {
        dispatch(removeUserInf(USER_INFORMATION));
        dispatch(changeUserInf(user));
        dispatch(clearTableLists());

        message.info('用户信息改变，重新登陆');
        setTimeout(() => {
            navigate('/login', { replace: true });
        }, 10);
    };

    const adminElement = usePermission(
        'admin',
        () => {
            return (
                <Button
                    type='primary'
                    onClick={() => console.log('你好')}
                >
                    你好（禁止）
                </Button>
            );
        },
        'disable'
    );

    const editorElement = usePermission(
        ['editor'],
        <span style={{ color: 'red' }}>美丽的祖国（显示）</span>,
        'display'
    );

    const visitorElement = usePermission(
        ['visitor'],
        () => {
            return (
                <button
                    style={{ color: 'blue' }}
                    onClick={() => {
                        console.log('###:  敲代码的小凌----');
                    }}
                >
                    敲代码的小凌（禁用）
                </button>
            );
        },
        'disable'
    );

    return (
        <Fragment>
            <h1>首页</h1>
            <div>
                <h1>切换用户</h1>
                <Button
                    type='primary'
                    danger
                    onClick={() => handleLogin('admin')}
                >
                    admin
                </Button>
                &nbsp;
                <Button
                    type='primary'
                    danger
                    onClick={() => handleLogin('editor')}
                >
                    editor
                </Button>
                &nbsp;
                <Button
                    type='primary'
                    danger
                    onClick={() => handleLogin('visitor')}
                >
                    visitor
                </Button>
                &nbsp; &nbsp;
                <FetchButton
                    roles={['admin']}
                    url='111'
                    disabled
                    onClick={() => {
                        console.log('###: ---admin');
                    }}
                >
                    admin/url/disabled
                </FetchButton>
                &nbsp; &nbsp;
                <FetchButton
                    roles={['admin1']}
                    disabled
                    onClick={() => {
                        console.log('###: ---admin1');
                    }}
                >
                    admin1/disabled
                </FetchButton>
                &nbsp; &nbsp;
                <FetchButton
                    roles={['admin']}
                    onClick={() => {
                        console.log('###: ---admin');
                    }}
                >
                    admin
                </FetchButton>
                &nbsp; &nbsp;
                <FetchButton
                    onClick={() => {
                        console.log('###: ---admin');
                    }}
                >
                    你好，没有权限
                </FetchButton>
                &nbsp; &nbsp;
                <FetchButton
                    roles={['editor']}
                    disabled
                    onClick={() => {
                        console.log('###: ---editor');
                    }}
                >
                    editor/disabled
                </FetchButton>
                &nbsp; &nbsp;
                <FetchButton
                    roles={['editor']}
                    onClick={() => {
                        console.log('###: ---editor');
                    }}
                >
                    editor
                </FetchButton>
            </div>

            <div>
                <h1>元素级的权限按钮测试：</h1>
                admin: {adminElement}
                <hr />
                visitor: {visitorElement}
                <hr />
                editor: {editorElement}
            </div>
        </Fragment>
    );
};

export default Home;
